{% extends 'base.html' %}

{% block title %}邮箱验证 - 智能助手{% endblock %}

{% block content %}
<div class="login-page-center">
    <div class="col-md-6">
        <div class="card shadow-lg border-0 rounded-lg mt-5">
            <div class="card-header bg-primary text-white text-center">
                <h3 class="mb-0">邮箱验证</h3>
            </div>
            <div class="card-body">
                <div class="alert alert-info" role="alert">
                    验证码已发送到您的邮箱：<strong>{{ email }}</strong>
                </div>
                <p>请登录您的QQ邮箱查收验证码，并在下方输入。</p>
                <p>如果您没有收到验证码，可以 <a href="{{ url_for('resend_verification') }}">点击此处重新发送</a>。</p>
                
                <form method="POST" action="{{ url_for('verify_email') }}">
                    <div class="form-floating mb-3">
                        <input class="form-control" id="verification_code" name="verification_code" type="text" placeholder="验证码" required />
                        <label for="verification_code">请输入您收到的验证码</label>
                    </div>
                    
                    <div class="d-flex align-items-center justify-content-between mt-4 mb-0">
                        <button class="btn btn-primary w-100" type="submit">验证邮箱</button>
                    </div>
                </form>
            </div>
            <div class="card-footer text-center py-3">
                <div class="small">
                    <a href="{{ url_for('dashboard') }}">返回仪表板</a>
                </div>
            </div>
        </div>
        
        <div class="card shadow-lg border-0 rounded-lg mt-4">
            <div class="card-header bg-info text-white text-center">
                <h5 class="mb-0">如何获取QQ邮箱验证码</h5>
            </div>
            <div class="card-body">
                <ol>
                    <li>登录您的QQ邮箱 <a href="https://mail.qq.com" target="_blank">https://mail.qq.com</a></li>
                    <li>查看收件箱中标题为"邮箱验证码"的邮件</li>
                    <li>打开邮件，复制6位数字验证码</li>
                    <li>返回此页面，将验证码粘贴到上方输入框</li>
                </ol>
            </div>
        </div>
    </div>
</div>
{% endblock %} 